<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <title>分页查询成名列表</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../stylesheets/theme.css">
    <link rel="stylesheet"                 href="../lib/font-awesome/css/font-awesome.css">
    <script                                src="../lib/jquery-1.7.2.min.js" type="text/javascript"></script>

    <!-- Demo page code -->

    <style type="text/css">
        #line-chart {
            height:300px;
            width:800px;
            margin: 0px auto;
            margin-top: 1em;
        }
        .brand { font-family: georgia, serif; }
        .brand .first {
            color: #ccc;
            font-style: italic;
        }
        .brand .second {
            color: #fff;
            font-weight: bold;
        }
        .errorAlert{
        	color: #f00;
            font-weight: bold;
        }
    </style>

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
  </head>

  <!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]-->
  <!--[if IE 7 ]> <body class="ie ie7 "> <![endif]-->
  <!--[if IE 8 ]> <body class="ie ie8 "> <![endif]-->
  <!--[if IE 9 ]> <body class="ie ie9 "> <![endif]-->
  <!--[if (gt IE 9)|!(IE)]><!--> 
  <body class=""> 
  <!--<![endif]-->
    <!-- 这里放置的是上边的标题栏 -->
    <div class="navbar">
        <div th:replace="part/navbar"></div>
    </div>

    <!-- 这里放置的是左边的导航栏 -->
    <div class="sidebar-nav">
        <div th:replace="part/sidebar"></div>
    </div>
    
    <div class="content">
        
        <!-- 标题在此 -->
        <div class="header">
            <h1 class="page-title">分页查询成名列表表格</h1>
        </div>
        
        <!-- 页面路径在此 -->
        <ul class="breadcrumb">
            <li><a href="index.html">Home</a> <span class="divider">/</span></li>
            <li class="active">List paged reputations</li>
        </ul>

        <div class="container-fluid">
        	<!-- 这个div内部就是页面主要内容 -->
            <div class="row-fluid">
					<div class="tab-pane active in" id="profile">
					
					<div class="search-well">
		                <form class="form-inline">
		                    <input id="kwTxt" class="input-xlarge" type="text">
		                    <button class="btn" type="button" onclick="pagedQuery(0);"><i class="icon-search"></i>Search</button>
		                </form>
		            </div>
						
					<table border="0" class="table">
						<thead>
							<tr>
								<td>id</td>
								<td>deleted</td>
								<td>名称</td>
								<td>简介</td>
								<td>创建者</td>
								<td>创建时间</td>
							</tr>
						</thead>
						<tbody id="myTable">
						</tbody>
					</table>
					
					<div th:replace="part/pager"></div>
						
				    </div>

                    <!-- 这里放置的是页脚部分 -->
                    <footer>
						<div th:replace="part/footer"></div>
                    </footer>
                    
            </div>
        </div>
    </div>
    
    <!-- 这部分是进行菜单设置的 -->
    <script type="text/javascript">
    	chooseSiderbar("dashboard-menu",3);

    	pagedQuery(0);
    	
    	// 核心分页函数,不要改名
    	function pagedQuery(pageNo){
    		var keyword=$("#kwTxt").val();
    	
    		$.ajax({
    			url:"/mediacool/pagedQueryRptn",
    			data:{pageNo:pageNo,keyword:keyword},
    			type:"get",
    			dataType:"json",
    			timeout:5000,
    			error:function(xhr,textStatus,errorThrown){alert('ajax error')},
    			success:function(rsps){
    				showRptnsInTable("myTable",rsps.datas);
    				adjustPagation(rsps.pageNo,rsps.pageCount);// 这个函数在pager里
    			},
    		});
    	}
     	
    	function showRptnsInTable(tableId,rptns){
    		 var table=document.getElementById(tableId);

	        // remove remained rows
	        var trs=table.childNodes;
	        for(var i=trs.length-1;i>=0;i--){
	            table.removeChild(trs[i]);
	        }
	
	        // add new rows    
	        for(var i=0,n=rptns.length;i<n;i++){
	            var rptn=rptns[i];
	            
	            var td1=document.createElement("td");
	            td1.appendChild(document.createTextNode(rptn.id));
	
	            var td2=document.createElement("td");
	            td2.appendChild(document.createTextNode(rptn.deleted));
	            
	            var td3=document.createElement("td");
	            td3.appendChild(document.createTextNode(rptn.name));
	            
	            var td4=document.createElement("td");
	            td4.appendChild(document.createTextNode(rptn.brief));
	            
	            var td5=document.createElement("td");
	            td5.appendChild(document.createTextNode(rptn.creater));
	            
	            var td6=document.createElement("td");
	            
	            
	            var ctime=convertDateFromString(rptn.ctime);
	            var onehoursAgo=getNHoursAgo(1);
	            var twohoursAgo=getNHoursAgo(2);
	            
	            if(ctime>onehoursAgo){
	            	var img=document.createElement("img");
	            	img.src="../images/hot.png";
	            	td6.appendChild(img);
	            }else if(ctime>twohoursAgo){
	            	var img=document.createElement("img");
	            	img.src="../images/new.png";
	            	td6.appendChild(img);
	            }else{
	            	// do nothing
	            }
	            
	            td6.appendChild(document.createTextNode(rptn.ctime));
	
	            var tr=document.createElement("tr");
	            tr.appendChild(td1);
	            tr.appendChild(td2);
	            tr.appendChild(td3);
	            tr.appendChild(td4);
	            tr.appendChild(td5);
	            tr.appendChild(td6);
	            
	            if(i % 2==0){
	            	tr.style.backgroundColor="#f5f2eb";
	            }
	            
	            table.appendChild(tr);
	        }
    	}
    	
    	// 将2021-11-07 12:48:02格式的时间转化为真正的JS时间
    	function convertDateFromString(dateString) { 
			if (dateString) { 
				var arr  = dateString.split(" "); 
				var dateArr = arr[0].split('-'); 
				var timeArr = arr[1].split(':')
				var date  = new Date(dateArr[0], dateArr[1]-1, dateArr[2],timeArr[0],timeArr[1],timeArr[2]); 
				return date;
			} 
		}
		
		// 得到n小时以前的时间
		function getNHoursAgo(n){
			var t = new Date(new Date().getTime() - n * 3600 * 1000);
			return t;
		}

    </script>
    
  </body>
</html>


